<template>
  <div class="showping">
    <div class="title">
        <p>{{msg}}</p>
    </div>
    <ul>
      <li v-for="(i,index) in arr" :key="index" @touchstart="touchstart(index)" @touchmove="touchmove(index)" @touchend="touchend(index)" :class="{'aa':num==index?boo2:'','bb':boo}">
        <div class="li">
          <img :src="i.img" alt="">
          <div>
            <p>{{i.title}}</p>
            <p>{{i.font}}</p>
            <p>{{i.size}}</p>
          </div>
        </div>
        <div class="delete" @click="deleteSlider(index)"  ref="remo">删除</div>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: '滑动组件',
      startX:0,   //开始位置
      endX:0,     //结束位置
      boo:false,  
      boo2:false,
      moveX: 0,   //滑动时的位置
      disX: 0,    //移动距离
      aa:"",
      num:-1,
      arr:[
        {img:'../../static/img/Chrome.png',title:'Chrome更新了',font:"不再支持Flash视频播放",size:"上午 8:30"},
        {img:'../../static/img/Sina.png',title:'电影新资讯',font:"电影《红海行动》上映以来票房暴涨，很多国人表示...",size:"上午 12:00"},
        {img:'../../static/img/video.png',title:'聚焦两会·共筑中国梦',font:"习近平代表的两会故事",size:"下午 17:45"},
        {img:'../../static/img/Wechat.png',title:'微信团队',font:"您的帐号有异常登录，如非本人操作，请及时修改密码",size:"昨天"},
        {img:'../../static/img/Chrome.png',title:'Chrome更新了',font:"不再支持Flash视频播放",size:"上午 8:30"},
        {img:'../../static/img/Sina.png',title:'电影新资讯',font:"电影《红海行动》上映以来票房暴涨，很多国人表示...",size:"上午 12:00"},
        {img:'../../static/img/video.png',title:'聚焦两会·共筑中国梦',font:"习近平代表的两会故事",size:"下午 17:45"},
        {img:'../../static/img/Wechat.png',title:'微信团队',font:"您的帐号有异常登录，如非本人操作，请及时修改密码",size:"昨天"},
        {img:'../../static/img/Chrome.png',title:'Chrome更新了',font:"不再支持Flash视频播放",size:"上午 8:30"},
        {img:'../../static/img/Sina.png',title:'电影新资讯',font:"电影《红海行动》上映以来票房暴涨，很多国人表示...",size:"上午 12:00"},
        {img:'../../static/img/video.png',title:'聚焦两会·共筑中国梦',font:"习近平代表的两会故事",size:"下午 17:45"},
        {img:'../../static/img/Wechat.png',title:'微信团队',font:"您的帐号有异常登录，如非本人操作，请及时修改密码",size:"昨天"}
      ]
    }
  },
  methods:{
    touchstart(index,ev){
      ev=ev||event
      if(ev.touches.length == 1){
        // 记录开始位置
        this.startX = ev.touches[0].clientX;
      }
    },
    touchmove(index,ev){
      ev=ev||event
      this.disX=this.endX-this.startX;
      var lis=document.querySelectorAll('li');
     
    },
    touchend(index,ev){
      ev = ev || event;
      this.endX=ev.changedTouches[0].clientX;
      
       if(this.disX>0){
         console.log(this.disX)
        this.boo=true
        this.boo2=false
        // lis[index].style.transform="translateX(0rem)";
      }else if(this.disX<-60){
         console.log(this.disX)
        this.num=index;
        this.boo=false
        this.boo2=true
        // lis[index].style.transform="translateX(-2rem)";
      }
    },
    deleteSlider(index){
      console.log(this.$refs.remo[index].parentNode);
      this.$refs.remo[index].parentNode.remove()
    }
  }
}    
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  

</style>
